<template>
	<view class="data-board-container relative">
		<scroll-view class="scroll-view" scroll-y>
			<view class="data-board-item">
				<view class="header">
					<view class="header-title">
						<text>今日数据 - 订单</text>
					</view>
				</view>
				<view class="data-list">
					<view class="data-line" style="--flex:1">
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ ding_dan.weixin || 0 }}</text>
								<text class="data-label">微信订单数</text>
							</view>
						</view>
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ ding_dan.douyin || 0 }}</text>
								<text class="data-label">抖音订单数</text>
							</view>
						</view>
						<!-- <view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ ding_dan.shipin || 0 }}</text>
								<text class="data-label">食品订单数</text>
							</view>
						</view> -->
					</view>
					<view class="data-line" style="--flex:2">
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ ding_dan.yue || 0 }}</text>
								<text class="data-label">余额订单数</text>
							</view>
						</view>
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ ding_dan.xudan || 0 }}</text>
								<text class="data-label">续单订单数</text>
							</view>
						</view>
					</view>
					<view class="data-line" style="--flex:2">
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ ding_dan.meituan || 0 }}</text>
								<text class="data-label">美团订单数</text>
							</view>
						</view>
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ ding_dan.chongzhi || 0 }}</text>
								<text class="data-label">充值订单数</text>
							</view>
						</view>
					</view>
					<!-- <view class="data-line" style="--flex:1">
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ ding_dan.douyin }}</text>
								<text class="data-label">抖音订单数</text>
							</view>
						</view>
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ ding_dan.chashiyi }}</text>
								<text class="data-label">茶艺师订单数</text>
							</view>
						</view>
					</view> -->
				</view>
			</view>
			<view class="data-board-item second">
				<view class="header">
					<view class="header-title">
						<text>今日数据 - 收入金额</text>
					</view>
				</view>
				<view class="data-list-line">
					<view class="data-line" style="--flex:1">
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ shou_ru.weixin || 0 }}</text>
								<text class="data-label">微信收入</text>
							</view>
						</view>
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ shou_ru.douyin || 0 }}</text>
								<text class="data-label">抖音收入</text>
							</view>
						</view>
						<!-- <view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ shou_ru.shipin || 0 }}</text>
								<text class="data-label">食品收入</text>
							</view>
						</view> -->
					</view>
					<view class="data-line" style="--flex:2">
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ shou_ru.yue || 0 }}</text>
								<text class="data-label">余额收入</text>
							</view>
						</view>
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ shou_ru.xudan || 0 }}</text>
								<text class="data-label">续单总收入</text>
							</view>
						</view>
					</view>
					<view class="data-line" style="--flex:2">
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ shou_ru.meituan || 0 }}</text>
								<text class="data-label">美团收入</text>
							</view>
						</view>
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ shou_ru.chongzhi || 0 }}</text>
								<text class="data-label">充值收入</text>
							</view>
						</view>
					</view>
					<!-- <view class="data-line" style="--flex:1">
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ shou_ru.douyin }}</text>
								<text class="data-label">抖音收入</text>
							</view>
						</view>
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ shou_ru.chashiyi }}</text>
								<text class="data-label">茶艺师收入</text>
							</view>
						</view>
					</view> -->
				</view>
			</view>

			<view class="data-board-item second">
				<view class="header">
					<view class="header-title">
						<text>历史数据-订单</text>
					</view>
					<view class="date-select-wrap" @click="selectDate(0)">
						<view class="date-value">
							<text>{{ orderDate }}</text>
						</view>
						<image src="/static/images/arrow-down.png" class="arrow-down"></image>
					</view>
				</view>
				<view class="data-list">
					<view class="data-line" style="--flex:1">
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyOrder.chashi_order_num_wx || 0 }}</text>
								<text class="data-label">微信订单数</text>
							</view>
						</view>
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyOrder.chashi_order_num_douyin || 0 }}</text>
								<text class="data-label">抖音订单数</text>
							</view>
						</view>
						<!-- <view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyOrder.shipin_order_num || 0 }}</text>
								<text class="data-label">食品订单数</text>
							</view>
						</view> -->
					</view>
					<view class="data-line" style="--flex:2">
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyOrder.chashi_order_num_yue || 0 }}</text>
								<text class="data-label">余额订单数</text>
							</view>
						</view>
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyOrder.xudan_order_num || 0 }}</text>
								<text class="data-label">续单订单数</text>
							</view>
						</view>
					</view>
					<view class="data-line" style="--flex:2">
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyOrder.chashi_order_num_meituan || 0 }}</text>
								<text class="data-label">美团订单数</text>
							</view>
						</view>
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyOrder.chongzhi_num || 0 }}</text>
								<text class="data-label">充值订单数</text>
							</view>
						</view>
					</view>
					<!-- <view class="data-line" style="--flex:1">
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyOrder.chashi_order_num_douyin || 0 }}</text>
								<text class="data-label">抖音订单数</text>
							</view>
						</view>
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyOrder.chayishi_num || 0 }}</text>
								<text class="data-label">茶艺师订单数</text>
							</view>
						</view>
					</view> -->
				</view>
			</view>

			<view class="data-board-item second">
				<view class="header">
					<view class="header-title">
						<text>历史数据-收入</text>
					</view>
					<view class="date-select-wrap" @click="selectDate(1)">
						<view class="date-value">
							<text>{{ moneyDate }}</text>
						</view>
						<image src="/static/images/arrow-down.png" class="arrow-down"></image>
					</view>
				</view>
				<view class="data-list-line">
					<view class="data-line" style="--flex:1">
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyMoney.chashi_order_price || 0 }}</text>
								<text class="data-label">茶室-总流水</text>
							</view>
						</view>
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyMoney.chongzhi_price || 0 }}</text>
								<text class="data-label">充值总收入</text>
							</view>
						</view>
						<!-- <view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyMoney.weixin_pay_price || 0 }}</text>
								<text class="data-label">茶室-微信收入</text>
							</view>
						</view> -->
					</view>
					<view class="data-line" style="--flex:1">
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyMoney.chashi_order_price_weixin || 0 }}</text>
								<text class="data-label">包间-微信收入</text>
							</view>
						</view>
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyMoney.chashi_order_price_douyin || 0 }}</text>
								<text class="data-label">抖音收入</text>
							</view>
						</view>
						<!-- <view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyMoney.shipin_order_price || 0 }}</text>
								<text class="data-label">食品收入</text>
							</view>
						</view> -->
					</view>
					<view class="data-line" style="--flex:2">
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyMoney.chashi_order_price_yue || 0 }}</text>
								<text class="data-label">余额收入</text>
							</view>
						</view>
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyMoney.xudan_order_price || 0 }}</text>
								<text class="data-label">续单总收入</text>
							</view>
						</view>
					</view>
					<view class="data-line" style="--flex:2">
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyMoney.xudan_order_price_wx || 0 }}</text>
								<text class="data-label">续单微信收入</text>
							</view>
						</view>
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyMoney.xudan_order_price_yue || 0 }}</text>
								<text class="data-label">续单余额收入</text>
							</view>
						</view>
					</view>
					<view class="data-line" style="--flex:2">
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyMoney.chashi_order_price_meituan || 0 }}</text>
								<text class="data-label">美团收入</text>
							</view>
						</view>
						<view class="data-item">
							<view class="data-target">
								<text class="data-value"></text>
								<text class="data-label"></text>
							</view>
						</view>
					</view>
					<!-- <view class="data-line" style="--flex:1">
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyMoney.chashi_order_price_douyin || 0 }}</text>
								<text class="data-label">抖音收入</text>
							</view>
						</view>
						<view class="data-item">
							<view class="data-target">
								<text class="data-value">{{ historyMoney.chayishi_price || 0 }}</text>
								<text class="data-label">茶艺师总收入</text>
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</scroll-view>
		<view class="absolute">
			<uni-datetime-picker @change="dateChange" :end="endDate" type="date" ref="datePicker" v-model="single">
				<view></view>
			</uni-datetime-picker>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		computed: {
			...mapGetters(['token', 'activeStore', 'userInfo']),
		},
		onShow() {
			if (!this.token.length) {
				return this.$toast({ title: '请先登录', time: 2000 }, () => {
					uni.reLaunch({
						url: '/pages/public/login'
					})
				})
			}
			this.initDate()
			this.initData()
		},
		methods: {
			getDateByStr(ev) {
				const date = new Date(ev);
				const [year, month, day] = [date.getFullYear(), date.getMonth() + 1, date.getDate()]
				const str = `${year}-${this.patchZero(month)}-${this.patchZero(day)}`
				return {
					str,
					value: date.getTime()
				}
			},
			dateChange(ev) {
				const keyEnum = ['orderDate', 'moneyDate']
				const key = keyEnum[this.selectType]
				const { str: dateStr, value: dateValue } = this.getDateByStr(ev.replace(/\-/g, '/'))
				this[key] = dateStr
				this[key + 'Value'] = dateValue
				const typeEnum = ['order', 'money']
				this.getDateByDate(dateStr, typeEnum[this.selectType], true)
				this.single = 0
				console.log(this.formatDate(this.orderDateValue), 'orderDate');
				console.log(this.formatDate(this.moneyDateValue), 'moneyDate');
			},
			selectDate(type) {
				this.selectType = type
				const keyEnum = ['orderDateValue', 'moneyDateValue']
				const key = keyEnum[type]
				const value = this[key]
				this.single = value
				this.$forceUpdate()
				setTimeout(() => {
					this.$refs.datePicker.show()
				}, 50)
			},
			delay(time = 200) {
				return new Promise(resolve => {
					setTimeout(() => {
						resolve()
					}, time)
				})
			},
			async getDateByDate(date, type = 'all', loading = false) {
				const { activeStore } = this
				if (activeStore.id === -1) return this.$toast({ title: '未选择店铺', time: 2000 })
				const { mobile } = this.userInfo
				if (!date) return this.$toast({ title: '未选择日期' })
				if (loading) {
					uni.showLoading({
						title: '正在获取数据',
						mask: true
					})
				}
				const resp = await this.https("/shujutongji/lishitongji", { store_id: activeStore.id, mobile, date })
				const { code, data, msg } = resp
				if (code !== 1) {
					uni.hideLoading()
					this.$toast({ title: '获取数据失败' })
					return
				}
				if (loading) {
					await this.delay(200)
					uni.hideLoading()
				}
				for (let key in data) {
					const value = data[key]
					data[key] = (value * 1).toFixed(2)
				}
				const {
					chashi_order_num_wx, // 微信订单数
					chashi_order_num_yue, // 余额订单数
					chashi_order_num_meituan, // 美团订单数
					chashi_order_num_douyin, // 抖音订单数
					shipin_order_num, // 食品订单数
					xudan_order_num, // 续单订单数
					chongzhi_num, // 充值订单数
					chayishi_num, // 茶艺师订单数
					chashi_order_price_weixin, // 微信总收入
					chashi_order_price_yue, // 余额总收入
					chashi_order_price_meituan, // 美团总收入
					chashi_order_price_douyin, // 抖音总收入
					shipin_order_price, // 食品总收入
					xudan_order_price, // 续单总收入
					xudan_order_price_wx, // 续单微信收入
					xudan_order_price_yue, // 续单余额收入
					chongzhi_price, // 充值总收入
					chayishi_price, // 茶艺师总收入
					chashi_order_price, // 茶室总流水
					weixin_pay_price, //微信总收入
				} = data
				const orderData = {
					chashi_order_num_wx,
					chashi_order_num_yue,
					chashi_order_num_meituan,
					chashi_order_num_douyin,
					shipin_order_num,
					xudan_order_num,
					chongzhi_num,
					chayishi_num
				}
				const moneyData = {
					chashi_order_price_weixin,
					chashi_order_price_yue,
					chashi_order_price_meituan,
					chashi_order_price_douyin,
					shipin_order_price,
					xudan_order_price,
					chongzhi_price,
					chayishi_price,
					xudan_order_price_wx,
					xudan_order_price_yue,
					chashi_order_price,
					weixin_pay_price
				}
				if (type === 'order') {
					this.historyOrder = orderData
					return
				}
				if (type === 'money') {
					this.historyMoney = moneyData
					return
				}
				if (type === 'all') {
					this.historyOrder = orderData
					this.historyMoney = moneyData
				}
			},
			async initData() {
				const { activeStore } = this
				if (activeStore.id === -1) return this.$toast({ title: '未选择店铺', time: 2000 })
				const { mobile } = this.userInfo
				this.https("/shujutongji/index", { store_id: activeStore.id, mobile }).then(resp => {
					const { code, data, msg } = resp
					if (code !== 1) return this.$toast({ title: msg })
					this.$toast({ title: '数据更新成功' })
					const { todaydingdan, todayshouru } = data
					console.log(todaydingdan, 'dingdan');
					this.ding_dan = todaydingdan
					this.shou_ru = todayshouru
				})
			},
			patchZero(value) {
				return ('0' + value).slice(-2)
			},
			formatDate(timestamp = 0) {
				let date = new Date(timestamp === 0 ? Date.now() : timestamp)
				const [year, month, day] = [date.getFullYear(), date.getMonth() + 1, date.getDate()]
				const str = `${year}-${this.patchZero(month)}-${this.patchZero(day)}`
				return {
					str,
					value: date.getTime()
				}
			},
			initDate() {
				const currentDate = Date.now() - 1000 * 60 * 60 * 24
				const { str: endStr, value: endValue } = this.formatDate(currentDate)
				this.endDate = endValue
				this.single = endValue
				this.endStr = endStr
				this.moneyDate = endStr
				this.orderDate = endStr
				this.orderDateValue = endValue
				this.moneyDateValue = endValue
				if (this.token.length) {
					this.getDateByDate(endStr, 'all', false)
				}
			},
			getNowDate() {
				const date = new Date(Date.now() - 1000 * 60 * 60 * 24);
				const [year, month, day] = [date.getFullYear(), date.getMonth() + 1, date.getDate()]
				const str = `${year}-${this.patchZero(month)}-${this.patchZero(day)}`
				this.orderDate = str
				this.moneyDate = str
				this.orderDateValue = date.getTime()
				this.moneyDateValue = date.getTime()
			},
		},
		data() {
			return {
				ding_dan: {},
				shou_ru: {},
				single: 0,
				endDate: 0,
				orderDate: '',
				moneyDate: '',
				orderDateValue: 0,
				moneyDateValue: 0,
				endStr: '',
				selectType: 0,
				historyOrder: {},
				historyMoney: {},
			};
		}
	}
</script>

<style lang="scss" scoped>
	.data-board-container {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		position: relative;
		background-color: #F7F8FA;
		padding: 16rpx 32rpx;

		.scroll-view {
			width: 100%;
			height: 100%;
		}

		.data-board-item {
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			position: relative;
			box-sizing: border-box;
			padding: 32rpx;
			overflow: hidden;

			&.second {
				margin-top: 16rpx;
			}

			.data-list-line {
				display: grid;
				grid-template-columns: repeat(1, 1fr);
				margin-top: 32rpx;
				position: relative;

				&::after {
					content: "";
					display: block;
					position: absolute;
					left: 50%;
					top: 0;
					bottom: 0;
					transform: translateX(-50%);
					width: 1px;
					height: 100%;
					background-color: #EEEEEE;
				}

				.data-line {
					flex: 1;
					display: flex;
					justify-content: center;
					margin-bottom: 32rpx;

					&:last-child {
						margin-bottom: 0;
					}


					.data-item {
						display: flex;
						flex-flow: column;
						align-items: center;
						flex: 1;
						white-space: nowrap;

						&:first-child {
							margin-right: 66rpx;
						}

						.data-target {
							width: auto;
							display: flex;
							flex-flow: column;
							align-items: center;
						}


						&:last-child {
							margin-bottom: 0;
						}

						.data-label {
							height: 40rpx;
							font-size: 24rpx;
							color: rgba(0, 0, 0, 0.6);
							line-height: 40rpx;
							margin-top: 8rpx;
						}

						.data-value {
							height: 48rpx;
							font-size: 40rpx;
							font-weight: bold;
							color: rgba(0, 0, 0, 0.9);
							line-height: 48rpx;
						}
					}
				}
			}

			.data-list {
				display: flex;
				flex-flow: row nowrap;
				margin-top: 32rpx;

				.data-line {
					flex: 1;
					display: flex;
					flex-flow: column;
					border-right: 1px solid #EEEEEE;

					// &:first-child {
					// 	.data-item {
					// 		align-items: flex-start;
					// 	}
					// }

					// &:last-child {
					// 	.data-item {
					// 		align-items: flex-end;
					// 	}
					// }

					.data-item {
						display: flex;
						flex-flow: column;
						margin-bottom: 32rpx;
						align-items: center;



						.data-target {
							width: auto;
							display: flex;
							flex-flow: column;
							align-items: center;
						}


						&:last-child {
							margin-bottom: 0;
						}

						.data-label {
							height: 40rpx;
							font-size: 24rpx;
							color: rgba(0, 0, 0, 0.6);
							line-height: 40rpx;
							margin-top: 8rpx;
						}

						.data-value {
							height: 48rpx;
							font-size: 40rpx;
							font-weight: bold;
							color: rgba(0, 0, 0, 0.9);
							line-height: 48rpx;
						}
					}

					&:last-child {
						border-right-color: transparent;
					}
				}
			}

			.header {
				display: flex;
				justify-content: space-between;

				.date-select-wrap {
					display: flex;
					align-items: center;
					padding: 4rpx 16rpx;
					box-sizing: border-box;
					position: relative;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					border: 2rpx solid rgba(0, 0, 0, 0.6);
					background-color: #FFF;
					white-space: nowrap;


					.date-value {
						width: 140rpx;
						height: 40rpx;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.6);
						line-height: 40rpx;
					}

					.arrow-down {
						width: 14rpx;
						height: 10rpx;
						margin-left: 12rpx;
					}
				}

				.header-title {
					height: 48rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.9);
					line-height: 48rpx;
				}
			}
		}
	}
</style>